<template>
  <view>
    <!-- 作业票暂停 -->
    <view class="status-container">
      <view class="status-title">
        <text class="status-required">*</text>
        <text>请选择暂停原因</text>
        <text class="status-small status-required">(必填)</text>
      </view>
      <CuRadioGroup v-model="reason" :list="options" isColumn class="pause-radio__group" />
    </view>
    <view class="submit_btn"><view class="button-confirm" @click="handleSubmit">确定</view></view>
  </view>
</template>

<script>
import CuRadioGroup from '@/components/cu-radio-group/cu-radio-group.vue'
import { updateTicketPauseStatus } from '@/api/spw/ticketPerform.js'
export default {
  components: {
    CuRadioGroup
  },
  async onLoad(option) {
    const { ticketId } = option
    this.ticketId = ticketId
  },
  data() {
    return {
      saveLoading: false,
      reason: '',
      options: [
        {
          value: '当前环境不适合继续作业',
          label: '当前环境不适合继续作业'
        },
        {
          value: '监护人需要暂离一会',
          label: '监护人需要暂离一会'
        },
        {
          value: '午饭时间',
          label: '午饭时间'
        },
        {
          value: '其他',
          label: '其他'
        }
      ]
    }
  },
  methods: {
    async handleSubmit() {
      if (this.reason === '') {
        this.$modal.showToast('请选择原因')
        return
      }
      if (this.saveLoading) {
        return
      }
      this.saveLoading = true
      await updateTicketPauseStatus({
        reason: this.reason,
        ticketId: this.ticketId,
        pause: '1'
      }).finally(() => {
        this.saveLoading = false
      })
      this.$modal.showToast('暂停成功')
      const eventChannel = this.getOpenerEventChannel()
      eventChannel.emit('callback:success', { data: true })
      uni.navigateBack()
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .pause-radio__group.cu-radio-group .cu-radio-item {
  margin-bottom: 30rpx;
  &:last-child {
    margin-bottom: 0;
  }
}
.status-title {
  text-align: center;
  font-size: 32rpx;
  color: #333333;
  margin-bottom: 40rpx;
  .status-required {
    color: #a14430;
  }
  .status-small {
    font-size: 26rpx;
  }
}
.status-container {
  margin-top: 24rpx;
  background: #fff;
  padding: 30rpx;
  margin-bottom: 100rpx;
}

.submit_btn {
  padding: 0 75rpx;
  margin-bottom: 100rpx;
  .button-confirm {
    height: 100rpx;
    line-height: 100rpx;
    background: #454a5e;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: #ffffff;
    text-align: center;
  }
}
</style>
